<template>
  <div class="select-outer">
    <span class="select-outer-text">select</span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  componentName: 'MSelectOuter',
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let node = this.$el.querySelector('select')
      if (node) {
        node.addEventListener('change', e => {
          this.updateRender(e.target.value)
        })
        this.updateRender(node.value)
      }
    },
    updateRender (value) {
      let node = this.$el.querySelector(`option[value="${value}"]`)
      if (node) {
        let text = node.innerHTML
        let textNode = this.$el.querySelector('.select-outer-text')
        textNode.classList.remove('select-outer-placeholder')
        textNode.innerHTML = text
        if (text.indexOf('请选择') > -1) {
          textNode.classList.add('select-outer-placeholder')
        }
      }
    }
  }
}

</script>

<style lang="scss">
  .select-outer{
    position:relative;
    display:inline-block;
    vertical-align: middle;
    select{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      opacity:0;
    }
    &-placeholder{
      color:$color-sub;
    }
  }
</style>
